<template>
    <el-container>
        <el-main class="wrapper">
            <v-breadcrumb v-bind:breadcumb="breadcumb"></v-breadcrumb>
            <section class="panel" v-loading="loading"
                     element-loading-text="数据同步中..."
                     element-loading-spinner="el-icon-loading"
                     :style="{height: mainHeight+'px'}">
                <header class="panel-heading">
                    活动管理
                </header>

                <div class="panel-body">
                    <div class="bh-btn-group">
                        <!--状态选择-->
                        <el-select v-model="couponSelected" placeholder="" @change="getCouponSelected">

                            <el-option
                                    v-for="item in couponList"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>

                        </el-select>
                        <!--查看选择-是否上首页-->
                        <el-select v-model="paySelected" placeholder="" @change="getPaySelected">

                            <el-option
                                    v-for="item in payList"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>

                        </el-select>
                        <div class="bh-search">
                            <el-input size="medium" placeholder="请输入标题关键字" v-model="search.title1"
                                      class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="list"></el-button>
                            </el-input>
                        </div>
                    </div>
                    <!--id:0,-->
                    <!--title1:'',-->
                    <!--nickname:'',-->
                    <!--explain:'',-->
                    <!--introduce:'',-->
                    <!--status:'',-->
                    <!--wintype:'',-->
                    <!--open_at:'',-->
                    <!--open_num:0,-->
                    <!--user_num:0,-->
                    <!--created_at: '2016-05-03',-->
                    <el-table
                            :data="tableData"
                            height="620"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="ID"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="title1"
                                label="标题"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="user.nickname"
                                label="赞助者">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status === 1" type="primary">进行中</el-tag>
                                <el-tag v-else-if="scope.row.status === 2" type="danger">已禁止</el-tag>
                                <el-tag v-else type="info">已结束</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="wintype"
                                label="开奖类型">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.wintype === 1" type="success">人数</el-tag>
                                <el-tag v-else-if="scope.row.wintype === 2" type="warning">手动</el-tag>
                                <el-tag v-else type="info">时间</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="pay"
                                label="首页推荐">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.pay === 1" type="info">否</el-tag>
                                <el-tag v-else-if="scope.row.pay === 2" type="danger">是</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="open_at"
                                label="开奖时间">
                        </el-table-column>
                        <el-table-column
                                prop="open_num"
                                label="开奖人数">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                prop="explain"
                                label="抽奖说明">
                        </el-table-column>
                        <!--<el-table-column-->
                        <!--prop="introduce"-->
                        <!--label="奖品介绍">-->
                        <!--</el-table-column>-->
                        <el-table-column
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button type="primary" size="small" plain @click="infoButton(scope.row)">详情
                                </el-button>
                                <el-dialog title="活动参与详情" :visible.sync="dialogTableVisible">
                                    <el-select style="padding-bottom: 5px;" v-model="joinStatusSelected" placeholder=""
                                               @change="getJoinStatusSelected">

                                        <el-option
                                                v-for="item in joinStatusList"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>

                                    </el-select>
                                    <el-tag>统计: 共<em>{{joinPageData.total}}</em>人</el-tag>
                                    <el-alert v-if="joinRowStatus === 1" title="活动进行中。。。" type="success"></el-alert>
                                    <el-alert v-else-if="joinRowStatus === 2" title="该活动已被禁止！" type="error"></el-alert>
                                    <el-alert v-else title="该活动已结束。" type="info"></el-alert>
                                    <el-container>
                                        <el-aside width="200px" style="padding-top:15px;" v-html="tableIntroduce">
                                        </el-aside>
                                        <el-main>
                                            <el-table :data="joinData" height="520" border>
                                                <el-table-column label="头像" width="70">
                                                    <template slot-scope="userScope">
                                                        <img width="50" :src="userScope.row.user.avatar"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="中奖状态" width="100">
                                                    <template slot-scope="statusScope">
                                                        <el-tag v-if="joinRowStatus === 1" title="待开奖" type="success">
                                                            待开奖
                                                        </el-tag>
                                                        <el-tag v-else-if="statusScope.row.status === 1" title="一等奖"
                                                                type="error">一等奖
                                                        </el-tag>
                                                        <el-tag v-else-if="statusScope.row.status === 2" title="二等奖"
                                                                type="error">二等奖
                                                        </el-tag>
                                                        <el-tag v-else-if="statusScope.row.status === 3" title="三等奖"
                                                                type="error">三等奖
                                                        </el-tag>
                                                        <el-tag v-else title="未中奖" type="info">未中奖</el-tag>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column property="user.nickname" label="昵称"
                                                                 width="200"></el-table-column>
                                                <el-table-column property="created_at" label="参与时间"></el-table-column>
                                            </el-table>
                                            <div style="text-align: center;"
                                                 v-if="joinPageData && joinPageData.last_page > 1">
                                                <div>共 <em>{{joinPageData.total}}</em> 条</div>
                                                <el-pagination background layout="prev, pager, next"
                                                               :page-size="joinPageData.per_page"
                                                               :total="joinPageData.total"
                                                               :current-page="joinPageData.current_page"
                                                               @current-change="joinHandleCurrentChange">
                                                </el-pagination>
                                            </div>
                                        </el-main>
                                    </el-container>
                                </el-dialog>
                                <el-button v-if="scope.row.status === 1" type="primary" size="small" plain
                                           @click="lockButton(scope.row.id)">禁用
                                </el-button>
                                <el-button v-else-if="scope.row.status === 2" disabled type="danger" size="small" plain>
                                    已禁用
                                </el-button>
                                <el-button v-else type="info" disabled size="small" plain>已结束</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: center;" v-if="!loading && pageData && pageData.last_page > 1">
                        <div>共 <em>{{pageData.total}}</em> 条</div>
                        <el-pagination background layout="prev, pager, next"
                                       :page-size="pageData.per_page"
                                       :total="pageData.total" :current-page="pageData.current_page"
                                       @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </section>
        </el-main>
    </el-container>

</template>

<script>
    import {mapGetters} from 'vuex';
    import vBreadcrumb from '../layout/breadcrumb.vue';
    import {IndexList, LockList, JoinList} from '../../utils/axios';

    export default {
        activated() {
            //设置顶部导航选中
            this.$store.dispatch('setActive', '/main');
            this.list();
        },
        data() {
            return {
                breadcumb: [{name: "活动管理"},],
                tableData: [],//列表数据
                pageData: [],//分页数据
                search: {title1: null, page: null},//筛选
                couponList: [{
                    value: 0,
                    label: 'All'
                }, {
                    value: 1,
                    label: '进行时'
                }, {
                    value: 2,
                    label: '已禁止'
                }, {
                    value: 3,
                    label: '已结束'
                }],
                couponSelected: 0,
                payList: [{
                    value: 0,
                    label: 'All'
                }, {
                    value: 1,
                    label: '免费活动'
                }, {
                    value: 2,
                    label: '付费首页'
                }],
                paySelected: 0,
                joinData: [],//参与数据
                joinPageData: [],//参与分页数据
                joinSearch: {page: null, id: 0, status: 0},//筛选
                joinRowStatus: 0,
                dialogTableVisible: false,
                tableIntroduce: '',
                joinStatusList: [{
                    value: 0,
                    label: 'All'
                }, {
                    value: 1,
                    label: '一等奖'
                }, {
                    value: 2,
                    label: '二等奖'
                }, {
                    value: 3,
                    label: '三等奖'
                }, {
                    value: 4,
                    label: '未中奖'
                }],
                joinStatusSelected: 0,
            };
        },
        components: {vBreadcrumb},
        computed: {
            ...mapGetters(['activeTopMenu', 'mainHeight', 'active', 'loading'])
        },
        methods: {
            //分页
            handleCurrentChange(val) {
                this.search.page = val;
                this.list();
            },
            //参与分页
            joinHandleCurrentChange(val) {
                this.joinSearch.page = val;
                JoinList({params: this.joinSearch}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.joinData = response.data.data;
                    }
                });
            },
            //获取列表
            list() {
                this.$store.dispatch('setLoading', true);
                IndexList({params: this.search}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                        this.$store.dispatch('setLoading', false);
                        this.tableData = [];
                        this.pageData = [];
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.tableData = response.data.data;
                        this.pageData = response.data;
                    }
                })
            },
            getCouponSelected() {
                this.$store.dispatch('setLoading', true);
                IndexList({params: {status: this.couponSelected, pay: this.paySelected}}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                        this.$store.dispatch('setLoading', false);
                        this.tableData = [];
                        this.pageData = [];
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.tableData = response.data.data;
                        this.pageData = response.data;
                    }
                })
                // console.log(this.couponSelected)
            },
            getPaySelected() {
                this.$store.dispatch('setLoading', true);
                IndexList({params: {status: this.joinStatusSelected}}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                        this.$store.dispatch('setLoading', false);
                        this.tableData = [];
                        this.pageData = [];
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.tableData = response.data.data;
                        this.pageData = response.data;
                    }
                })
            },
            getJoinStatusSelected() {
                if (this.joinRowStatus === 1) {
                    this.$message.error('等待开奖。。。');
                    this.joinStatusSelected = 0;
                    return;
                }
                this.joinSearch.status = this.joinStatusSelected;
                console.log(this.joinSearch.status);
                JoinList({params: this.joinSearch}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.joinData = response.data.data;
                        this.joinPageData = response.data;
                    }
                });
                this.dialogTableVisible = true;
            },
            lockButton(id) {

                this.$store.dispatch('setLoading', true);
                LockList({params: {id: id}}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                        this.$store.dispatch('setLoading', false);
                    } else {
                        this.$store.dispatch('setLoading', false);
                    }
                    this.list();
                })
            },
            infoButton(row) {
                this.tableIntroduce = row.introduce;
                this.joinData = [];
                this.joinPageData = [];
                this.joinSearch.id = row.id;
                this.joinRowStatus = row.status;
                this.joinStatusSelected = 0;
                JoinList({params: {id: row.id}}).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.joinData = response.data.data;
                        this.joinPageData = response.data;
                    }
                });
                this.dialogTableVisible = true;
                console.log(row);
            }
        },
    }
</script>